<template>
  <n-form
    ref="formRef"
    :model="formData"
    :rules="pageRules"
    label-placement="left"
    :label-width="100"
  >
    <n-grid cols="8 400:24">
      <n-form-item-gi span="24" label="页面名称" path="name">
        <n-input placeholder="请输入页面名称" v-model:value="formData.name" />
      </n-form-item-gi>
      <n-form-item-gi span="24" label="排序" path="order">
        <n-input-number
          placeholder="请输入排序"
          v-model:value="formData.order"
        />
      </n-form-item-gi>
      <n-form-item-gi span="24" label="图标" path="icon">
        <n-input placeholder="请输入图标名称" v-model:value="formData.icon">
          <template #prefix>
            <div w-30 v-if="formData.icon">
              <icon :icon="formData.icon" class="text-20" />
            </div>
          </template>
          <template #suffix>
            <a
              href="https://icon-sets.iconify.design/"
              target="_blank"
              class="w-24 h-24 rd-5 f-c-c cursor-pointer"
              hover="bg-#eeeeee"
            >
              <icon-basil-search-outline class="text-20" />
            </a>
          </template>
        </n-input>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="路由名称" path="routeName">
        <n-input
          placeholder="请输入路由名称"
          v-model:value="formData.routeName"
        />
      </n-form-item-gi>
      <n-form-item-gi span="24" label="路由路径" path="routePath">
        <n-input
          placeholder="请输入路由路径"
          v-model:value="formData.routePath"
        />
      </n-form-item-gi>
      <n-form-item-gi span="24" label="组件名称" path="component">
        <n-select
          v-model:value="formData.component"
          filterable
          placeholder="请选择菜单组件"
          :options="viewOptions"
        />
      </n-form-item-gi>
      <n-form-item-gi span="8" label="新窗口打开" path="newTab">
        <n-switch v-model:value="formData.newTab"></n-switch>
      </n-form-item-gi>
      <n-form-item-gi span="8" label="缓存" path="cache">
        <template #label>
          <n-space align="center" justify="end">
            缓存
            <tooltip-icon tip="开启时，页面来回切换数据不会丢失" :size="14">
              <icon-mdi-warning-circle-outline />
            </tooltip-icon>
          </n-space>
        </template>
        <n-switch v-model:value="formData.cache" />
      </n-form-item-gi>
      <n-form-item-gi span="8" label="隐藏" path="hide">
        <template #label>
          <n-space align="center" justify="end">
            隐藏
            <tooltip-icon
              tip="一些列表、表格的详情页面需要通过参数跳转，所以不能显示在菜单中"
              :size="14"
            >
              <icon-mdi-warning-circle-outline />
            </tooltip-icon>
          </n-space>
        </template>
        <n-switch v-model:value="formData.hide" />
      </n-form-item-gi>
      <n-form-item-gi span="24" label="权限标识" path="perms">
        <n-input placeholder="请输入权限标识" v-model:value="formData.perms" />
      </n-form-item-gi>

      <n-form-item-gi span="24" label="状态" path="status">
        <n-switch v-model:value="formData.status">
          <template #checked>启用</template>
          <template #unchecked>禁用</template>
        </n-switch>
      </n-form-item-gi>
    </n-grid>
  </n-form>
</template>

<script lang="ts" setup>
import { pageRules } from "./rules";
import { viewOptions } from "@/views";
import { FormInst } from "naive-ui";
import { Props, Emits, useForm } from "./service";
import { PAGE_CODE } from "../config";

const props = defineProps<Props>();
const emits = defineEmits<Emits>();

const formRef = ref<FormInst>();
const valid = () => formRef.value?.validate();
const restoreValid = () => formRef.value?.restoreValidation();

const { formData, handleSubmit, handleReset } = useForm({
  type: PAGE_CODE,
  props,
  emits,
  restoreValid,
});

defineExpose({ handleSubmit, handleReset, valid });
</script>
